<template>
  <div class="start">
    <van-cell-group>
      <van-field
        :value="showDeviceName"
        label="选择设备"
        placeholder="请选择"
        type="textarea"
        rows="1"
        autosize
        is-link
        clickable
        readonly
        required
        @click="equipsShow = true"
      />
      <van-field
        label="故障类型"
        placeholder="请选择"
        is-link
        clickable
        readonly
        required
        @click="openProblemsPopup"
      >
        <template #input>
          <div class="custom-box">
            <span v-show="problems.length === 0" class="text-placeholder">
              请选择
            </span>
            <div v-for="(item, index) in fetchProblems" :key="item.FailureType">
              <van-tag
                closeable
                size="large"
                type="warning"
                plain
                @close="deleteProblem(index)"
              >
                {{ item.FailureType }}
              </van-tag>
            </div>
          </div>
        </template>
      </van-field>
      <van-cell center title="是否紧急">
        <template #right-icon>
          <van-switch v-model="isUrgent" size="22" />
        </template>
      </van-cell>
      <van-field
        v-model="remark"
        label="备注"
        placeholder="请输入备注信息"
        type="textarea"
        rows="1"
        autosize
      />
    </van-cell-group>
    <div class="block-btn-wrap">
      <van-button
        v-show="$route.query.qrcode === '1'"
        type="primary"
        block
        @click="scanQrCode()"
      >
        扫一扫
      </van-button>
      <van-button type="info" block @click="submit()"> 提交 </van-button>
    </div>

    <!-- 选择设备 -->
    <equips-popup
      v-model="equipsShow"
      :equipmentInfo="equipmentInfo"
      @confirm="getEquip"
    />
    <!-- 选择故障类型 -->
    <problems-popup
      v-model="problemsShow"
      :equipmentInfo="equipmentInfo"
      :problems="problems"
      @confirm="getProblems"
    />
  </div>
</template>

<script>
import { Pad_EquipmentScanCode, Pad_EquipmentPost } from "../../api/index";
import { deepClone } from "../../utils";

export default {
  name: "Start",
  components: {
    "equips-popup": () => import("../../components/repair/EquipsPopup.vue"),
    "problems-popup": () => import("../../components/repair/ProblemsPopup.vue"),
  },
  data() {
    return {
      equipmentInfo: {},
      problems: [],
      isUrgent: false,
      remark: "",
      equipsShow: false,
      problemsShow: false,
    };
  },
  computed: {
    showDeviceName() {
      let str = "";
      if (this.equipmentInfo.EquipmentName) {
        str += this.equipmentInfo.EquipmentName;
      }
      if (this.equipmentInfo.EquipmentNoDes) {
        str += `(${this.equipmentInfo.EquipmentNoDes})`;
      }
      return str;
    },
    fetchProblems() {
      return this.problems.map((val) => {
        return JSON.parse(val);
      });
    },
  },
  mounted() {
    if (this.$route.query.qrcode === "1") {
      this.equipmentInfo = JSON.parse(this.$route.query.equipmentInfo);
      this.equipsShow = true;
    }
  },
  methods: {
    // 扫码
    scanQrCode() {
      const _this = this;
      window.wx.scanQRCode({
        desc: "scanQRCode desc",
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
        success: function (res) {
          _this.getDeviceInfo(res.resultStr);
        },
        error: function (res) {
          if (res.errMsg.indexOf("function_not_exist") > 0) {
            alert("版本过低请升级");
          }
        },
      });
    },
    // 获取信息
    getDeviceInfo(code) {
      const params = {
        EquipmentNoDes: code,
      };
      Pad_EquipmentScanCode(params)
        .then((res) => {
          if (res.ReturnResult === "1") {
            this.equipmentInfo = res.ReturnData;
            this.equipsShow = true;
          } else {
            this.$notify(res.Message);
          }
        })
        .catch((err) => {
          this.$notify(err);
        });
    },
    // 打开故障类型弹窗
    openProblemsPopup() {
      if (JSON.stringify(this.equipmentInfo) !== "{}") {
        this.problemsShow = true;
      } else {
        this.$toast("请先选择设备");
      }
    },
    // 选择设备
    getEquip(data) {
      this.equipmentInfo = data;
      if (this.problems.length > 0) {
        this.problems = [];
      }
    },
    // 选择问题
    getProblems(data) {
      this.problems = deepClone(data);
    },
    // 删除问题
    deleteProblem(index) {
      this.problems.splice(index, 1);
    },
    // 提交
    submit() {
      if (JSON.stringify(this.equipmentInfo) === "{}") {
        this.$toast("请选择设备");
      } else if (this.fetchProblems.length === 0) {
        this.$toast("请选择故障类型");
      } else {
        const params = {
          EquipmentID: this.equipmentInfo.EquipmentNo,
          FaultType: this.fetchProblems,
          UrgentTask: this.isUrgent ? 1 : 0,
          Remarks: this.remark,
        };
        Pad_EquipmentPost(params)
          .then((res) => {
            if (res.ReturnResult === "1") {
              this.$dialog
                .alert({
                  message: res.Message,
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$dialog.alert({
                message: res.Message,
              });
            }
          })
          .catch((err) => {
            this.$notify(err);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-box {
  .van-tag {
    margin-right: 8px;
    margin-bottom: 5px;
  }
}
</style>
